iT邦幫忙

2019 iT 邦幫忙鐵人賽

0
自我挑戰組

前端工程師的30份套餐系列 第 29

React的props與state

  • 分享至 

  • xImage
  •  

記得這兩位朋友的分別代表的作用

  • state是讓元件控制自己的狀態
  • props是讓外部對元件自己進行配置

*props

props是React父元件與子元件間溝通的橋樑,是靜態(唯獨)的。
props與state主要的差別在於props是不可改變的

父元件App傳入子元件name屬性,value為joyce

import React, { Component } from 'react';
import Table from './Table'

class App extends Component {
  render() {
    return (
      <Table name="joyce"/>
    );
  }
}

export default App;

子元件Table透過this.props取得由父元件傳入的name
就會印出joyce。

import React, { Component } from 'react';

class Table extends Component {
  render() {
    return (
      <div className="Table">{this.props.name}</div>
    );
  }
}

export default Table;

*state

state 主要作用是用元件保存、控制以及修改自己可變的狀態。state在元件內部初始化(給預設值),state狀態可以透過this.setState方法進行更新,setState會使元件重新渲染。
以下範例透過點擊li就可切換h3所顯示的狀態

class App extends Component {
  constructor(props) { //若要使用這個方法
    super(props) //必須先執行super(props),若有用到props的話會找不到this.props,沒用到props也可以只寫super()
    this.state = {
        currentPage: 'one', //給預設值
    }
  }

  clickHandler = (e) => {
    this.setState({ currentPage: e})
  }

  render () {
    return (
      <div>
          <h3>{this.state.currentPage}</h3>
          <ul>
              <li onClick={()=>this.clickHandler('one')}>one</li>
              <li onClick={()=>this.clickHandler('two')}>two</li>
          </ul>
      </div>
    )
  }
}
export default App;
  • 沒有state的元件叫做無狀態元件(stateless component)
  • 設定了state的原元件叫做有狀態元件(stateful component)
    因為狀態會帶來管理上的複雜性,所以React.js非常鼓勵多寫無狀態元件
    以下為範例(一) 沒有使用state的元件,應改為無狀態元件,詳見範例(二)
class HelloWorld extends Component {
  constructor() {
    super()
  }

  sayHi = () => {
    alert('Hello World')
  }

  render () {
    return (
      <div onClick={this.sayHi}>Hello World</div>
    )
  }
}
export default HelloWorld;

範例(二)改為無狀態元件(函數式的寫法)

const HelloWorld = (props) => {
  const sayHi = (event) => alert('Hello World')
  return (
    <div onClick={sayHi}>Hello World</div>
  )
}
export default HelloWorld;

通常一個元件是透過繼承Component來建構,一個子類就是一個元件。
而用函數的元件寫法:一個函數就是一個元件,可以和之前練習一樣,透過來使用該元件,兩者不同的是函數式元件只能接受props,無法像類元件一樣可以在constructor裡面初始化state。函數式元件(無狀態元件)就是一種只能接受props和提供render方法的類元件。


上一篇
認識React
下一篇
React 生命週期(Life Cycle)
系列文
前端工程師的30份套餐30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
iT邦新手 1 級 ‧ 2019-09-26 13:57:35

不好意思,路過剛好看到,發現 唯讀 打錯字

constructor(props) { 
    super(props) 
  }

另外有個地方一直不太明白,請問這段加進props他做了什麼事?
謝謝

Cheng® iT邦新手 2 級 ‧ 2020-03-04 13:54:18 檢舉

因為這樣React.Component建構子才能初始化this.props

iT邦新手 1 級 ‧ 2020-03-08 13:16:50 檢舉

謝謝。
後來有發現我的問題所在了,一開始把整個 component 跟 constructor 搞混了。
當時想說明明我不加這段也能在 component 裡面使用 this.props,所以一直搞不明白 。
不過後來都改使用 Hook ,也沒有這個問題了。

我要留言

立即登入留言